<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle + '跟踪记录'">
    <div>
      <el-input v-model="user" placeholder="请选择客户">
        <template #append>
          <el-button :icon="Plus">选择客户</el-button>
        </template>
      </el-input>
      <div class="mt10 mb10">
        <span class="line">|</span>
        <span>基础信息</span>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="recordForm"
        status-icon
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联合同" prop="contract">
              <el-select v-model="ruleForm.contract" placeholder="请选择">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟踪方式" prop="mode">
              <el-select v-model="ruleForm.mode" placeholder="请选择">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="跟踪目的" prop="objective">
              <el-select v-model="ruleForm.objective" placeholder="请选择">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="跟踪阶段" prop="stage">
              <el-select v-model="ruleForm.stage" placeholder="请选择">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>
        <el-form-item label="附件">
          <div class="demo-image__preview">
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :zoom-rate="1.2"
              :preview-src-list="srcList"
              :initial-index="4"
              fit="cover"
            />
          </div>
          <div></div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="recordDialog">
import { ref } from 'vue'
import { ElButton, ElDialog, ElInput, FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const dialogTitle = ref<string>()
const user = ref<string>()
// const trackFormRef = ref()
const isAdd = ref(false)
const modifyRecordId = ref<any>()
// 初始化表单
const init = (title: string, modifyData: any) => {
  dialogVisible.value = true
  if (title === 'add') {
    dialogTitle.value = '新建'
    isAdd.value = true
  } else {
    dialogTitle.value = '修改'
    // form = modifyData
    modifyRecordId.value = modifyData // 根据数据情况做修改
  }
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  contract: '',
  mode: '',
  objective: '',
  stage: '',
  remark: '',
})

const rules = reactive<FormRules>({
  contract: [{ required: true, message: '请选择关联合同', trigger: 'change' }],
  mode: [{ required: true, message: '请选择跟踪方式', trigger: 'change' }],
  objective: [{ required: true, message: '请选择跟踪目的', trigger: 'change' }],
  stage: [{ required: true, message: '请选择跟踪阶段', trigger: 'change' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'change' }],
})
defineExpose({ init })

const emit = defineEmits(['refershRecord'])
//  表单提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogVisible.value = false
      console.log(ruleForm)
      console.log('根据isAdd,新增/修改记录')
      resetForm(ruleFormRef.value)
      emit('refershRecord')
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 表单重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 预览图片
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
